<template>
	<view class="flex justify-center items-center shadow p-20 rounded-lg flex-1" @touchstart="handleTouchStart"
		@touchend="handleTouchEnd" @touchcancel="handleTouchCancel">
		<text>{{ isRecording ? '松开结束' : '按住说话' }}</text>
	</view>
	<!-- 录音状态提示 -->
	<!-- <uni-popup ref="showPopup" type="center" round>
		<view class="popup-content">

			<text class="text-white">{{isRecording?'录音中':''}}{{ recordTip }}</text>
		</view>
	</uni-popup> -->
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import indexApi from '@/apis/apiList/indexApi'
	const recorderManager = uni.getRecorderManager()
	// : ml - citation {
	// 	ref = "2,6"
	// 	data = "citationList"
	// }
	const showPopup = ref(null)
	const isRecording = ref(false)
	const recordTip = ref('上滑取消录音')
	const recordList = ref([])
	let recordTimer = null
	const audioTime = ref(0)
	// 开始录音
	const startRecord = () => {
		audioTime.value = 0
		recorderManager.start({
			format: 'mp3',
			duration: 60000
		})
		// showPopup.value.open()
		isRecording.value = true

		// 录音超时自动停止
		recordTimer = setInterval(() => {
			audioTime.value += 1
			console.log(audioTime.value);
			if (audioTime.value > 60) stopRecord()
		}, 1000)
	}

	// 停止录音
	const stopRecord = () => {
		recorderManager.stop()
		clearInterval(recordTimer)
		isRecording.value = false
		// showPopup.value.close()
	}

	// 取消录音
	const cancelRecord = () => {
		recorderManager.stop()
		uni.showToast({
			title: '已取消录音',
			icon: 'none'
		})
		clearInterval(recordTimer)
		isRecording.value = false
		// showPopup.value.close()
	}

	// 触摸事件处理
	const handleTouchStart = () => {
		startRecord()
	}

	const handleTouchEnd = () => {
		if (isRecording.value) stopRecord()
	}

	const handleTouchCancel = () => {
		if (isRecording.value) cancelRecord()
	}
	const emits = defineEmits(['createCustomMessage'])
	// 录音回调
	recorderManager.onStop((res) => {
		console.log(res);
		if (res.tempFilePath) {
			const params = {
				filePath: res.tempFilePath,
				name: 'file',
			}
			indexApi.upLoadImage(params).then(res => {
				const val = {
					data: 'audio',
					description: `${res.data.url}`,
					extension: `${audioTime.value}`
				}
				console.log(val);
				emits('createCustomMessage', val)
			})
			// recordList.value.unshift({
			// 	path: res.tempFilePath,
			// 	duration: Math.floor(res.duration / 1000)
			// })
		}
	})

	recorderManager.onError((err) => {
		console.error('录音错误:', err)
		uni.showToast({
			title: '录音失败',
			icon: 'none'
		})
	})

	// 删除录音
	const deleteRecord = (index) => {
		uni.removeSavedFile({
			filePath: recordList.value[index].path,
			complete: () => {
				recordList.value.splice(index, 1)
			}
		})
	}
</script>

<style scoped>
	.record-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;
	}

	.popup-content {
		padding: 30px;
		text-align: center;
	}

	.record-list {
		margin-top: 20px;
	}

	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		border-bottom: 1px solid #eee;
	}
</style>